<template>
    <div class="recharge page">
        <formHeader :title="'充值'" :wColor="true"></formHeader>
        <div class="con">
            <div class="input">
                <div class="title">充值金额</div>
                <div class="inputBox">
                    <div class="rmb">￥</div>
                    <cube-input :maxlength="5" ref="in" @change="changeValue" v-model="amount" type="number"></cube-input>
                </div>
            </div>
            <div class="ways">
                <div class="wayImg">
                    <img src="../wallet/image/wx.png" alt="">
                </div>
                <div class="name">微信支付</div>
                <div class="check">
                    <i class="cubeic-right" style="color:#00D6C0;font-size:16px;"></i>
                </div>
            </div>
            <div class="skip">
                <div class="title">
                    <span>点击充值即表示你已同意</span>
                    <span class="sec">《充值协议》</span>
                </div>
                <div class="btn" @click="commit"><img src="../wallet/image/toRecharge.png" alt=""></div>
            </div>
        </div>
    </div>
</template>

<script>
    import {clearNoNum} from "@/common/js/num";
    import {showInfo} from "@/toast";
    import {info} from "@/api/user";
    import {commit} from "@/api/account";
    import {config} from "@/util/wx";
    import Wx from '@/wx'
    import formHeader from '@/components/form-header'
    export default {
        name : "recharge",
        components:{formHeader},
        created() {
            info().then(res => {
                this.user = res.data
            })
            //配置
            config()
        },
        data() {
            return {
                payConfig:null,
                user: null,
                amount:null
            }
        },
        methods: {
            changeValue() {
                this.payConfig =null//重置
                this.amount = clearNoNum(this.amount)
            },
            wxPay(){
                if (this.payConfig) {
                    Wx.pay(this.payConfig).then(res => {
                        // Dialog.showCorrect("操作成功")
                        this.$router.back()
                    })
                }
            },
            commit() {
                if (!this.amount || this.amount < 0) {
                    showInfo("输入有误!", "warn")
                } else {
                    if(this.amount>2000){
                        showInfo("最大金额2000", "warn")
                    }
                    if (this.payConfig) {
                        this.wxPay();
                    } else {
                        commit(this.amount).then(res => {
                            this.payConfig = res.data
                            this.wxPay()
                        })
                    }

                }

            }
        }
    }
</script>

<style scoped lang="stylus">
    .recharge
        background-color $page-bg
        .con
            margin-top 57px
            .input
                padding 15px 22px
                background-color #fff
                .inputBox
                    color #333
                    font-size 29px
                    display flex
                    .rmb
                        display flex
                        align-items center
                .title
                    color #333
                    font-size 17px
                    margin-bottom 15px
                /deep/.cube-input
                    border none
                    color #333
                    font-size 29px
                    font-weight bold
                /deep/.cube-input_active
                    border none
                /deep/.cube-input-field
                    color #333
                    font-size 29px
                    font-weight bold
                    font-family DIN
                    border none
                /deep/.cube-input::after
                    border none
            .ways
                display flex
                justify-content space-between
                align-items center
                padding 12px 24px
                background-color #fff
                margin-top 10px
                .wayImg
                    img
                        width 19px
                        height  19px
                .check
                    img
                        width: 13px
                        height: 13px
                .name
                    color #333
                    font-size 15px
                    flex 1
                    margin-left 11px
            .skip
                margin-top 120px
                padding 0 15px
                .title
                    display flex
                    justify-content center
                    color #999
                    font-size 10px
                    .sec
                        color #00D6c0
                .btn
                    margin-top 10px
                    img
                        width 100%
</style>
